<template>
    <div class="container">
        <el-table
            :data="list"
            :row-style="rowstyle"
            style="width: 100%; margin-top: 5px; height: calc(100% - 40px)"
        >
            <el-table-column prop="CompanyName" label="餐企名称" width="200" show-overflow-tooltip>
                <template #default="scope">
                    <div v-html="getLink(scope.row.CompanyID, scope.row.CompanyName)"></div>
                </template>
            </el-table-column>
            <el-table-column prop="LinkMan" label="联系人" width="100" show-overflow-tooltip />
            <el-table-column prop="Telphone" label="联系电话" width="120" show-overflow-tooltip />
            <el-table-column prop="Address" label="详细地址" show-overflow-tooltip />
            <el-table-column prop="Monitors" label="监测点" show-overflow-tooltip>
                <template #default="scope">
                    <template v-for="(item, index) in scope.row.Monitors" :key="index">
                        <el-link
                            :href="getMonitorLink(item)"
                            target="_blank"
                            type="primary"
                            :underline="false"
                        >
                            实时监控{{ scope.row.Monitors.length > 1 ? index + 1 : '' }}
                        </el-link>
                    </template>
                </template>
            </el-table-column>
            <el-table-column prop="CompanyID" label="操作" min-width="120" show-overflow-tooltip>
                <template #default="scope">
                    <el-link
                        :href="'/manager/companyinfo/' + scope.row.CompanyID"
                        target="_blank"
                        type="primary"
                        :underline="false"
                    >
                        详情
                    </el-link>
                    <el-popover placement="right" :width="230" trigger="click">
                        <template #reference>
                            <el-button style="margin-left: 8px" type="primary" link size="small">
                                二维码
                            </el-button>
                        </template>
                        <el-image
                            :src="
                                'https://lampblackfile.oss-cn-hangzhou.aliyuncs.com/images/' +
                                scope.row.QrcodeUrl
                            "
                            style="width: 200px; height: auto"
                        ></el-image>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>
        <el-config-provider :locale="zhCn">
            <el-pagination
                background
                size="small"
                class="pager"
                layout="sizes,total, prev, pager, next,jumper"
                :page-sizes="[10, 20, 50, 100, 200, 300, 500, 1000]"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                v-model:current-page="query.pageindex"
                :page-size="query.pagesize"
                :total="total"
            ></el-pagination>
        </el-config-provider>
    </div>
</template>
<script setup>
import { ref, onMounted, watch, nextTick } from 'vue'
import http from '@/utils/http'
import * as util from '@/utils/util'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { ElMessage } from 'element-plus'

onMounted(async () => {
    await getData()
    nextTick(() => {
        emits('finish')
    })
})

const getMonitorLink = mid => {
    return `${process.env.NODE_ENV === 'development' ? '/' : '/datav/'}monitor.html?mid=${mid}`
}

const props = defineProps(['placeId'])

const emits = defineEmits(['finish'])

watch(
    () => props.placeId,
    (newVal, oldVal) => {
        if (newVal !== oldVal) {
            getData()
        }
    },
    {
        //不立即执行回调函数
        immediate: false,
        deep: true,
    }
)

const query = ref({
    pagesize: 10,
    pageindex: 1,
})

const getLink = (id, name) => {
    return `<a href="/manager/companyinfo/${id}" target="_blank" style="text-decoration: none;">${name}</a>`
}

// const handleClick = e => {
//     console.log(e)
// }

const list = ref([])

const total = ref(0)

const handleCurrentChange = async e => {
    console.log('页码：' + e)
    query.value.pageindex = e
    await getData()
}

const handleSizeChange = async e => {
    console.log('页大小：' + e)
    query.value.pageindex = 1
    query.value.pagesize = e
    await getData()
}

const getData = async () => {
    var cid = util.GetQueryParam('cid')
    var area = util.GetQueryParam('area')
    var res = await http.get(
        `getcompanylist?area=${area ? area : ''}&category=${cid ? cid : ''}&place=${
            props.placeId
        }&pagesize=${query.value.pagesize}&page=${query.value.pageindex}`
    )

    if (res.status == 0) {
        list.value = res.data
        total.value = res.total
    } else {
        console.log(res)
        ElMessage(res.msg)
    }
}
const rowstyle = ({ row, rowIndex }) => {
    console.log(row)
    if (rowIndex % 2 === 0) {
        return { backgroundColor: 'rgba(3,76,106,0.2)' }
    }
}
</script>
<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;

    .pager {
        margin-top: 5px;
        height: 30px;
    }
}
.el-table {
    --el-table-border-color: transparent;
    --el-table-border: none;
    --el-table-text-color: #bdbdbe;
    --el-table-header-text-color: #bdbdbe;
    --el-table-row-hover-bg-color: transparent;
    --el-table-current-row-bg-color: transparent;
    --el-table-header-bg-color: transparent;
    --el-table-bg-color: transparent;
    --el-table-tr-bg-color: transparent;
    --el-table-expanded-cell-bg-color: transparent;
}
</style>
